<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="dataQuotaList"
      style="width: 100%;min-width: 800px;margin-top:30px;"
      border
    >
      <el-table-column align="center" label="设备号" width="100">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="指标名" width="100">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="指标单位" width="100">
        <template slot-scope="scope">
          {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="指标键名" width="100">
        <template slot-scope="scope">
          {{ scope.row.valueKey }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="键值类型" width="100">
        <template slot-scope="scope">
          {{ scope.row.valueType }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="webhook" width="100">
        <template slot-scope="scope">
          {{ scope.row.webhook }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="安全取值" width="100">
        <template slot-scope="scope">
          {{ scope.row.reference }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.createTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleUpdateQuota(scope)">修改</el-button>
          <el-button type="danger" size="small" @click="handleDeleteQuota(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="add-button-container">
      <div class="add-button-item">
        <el-button class="add-button" type="primary" @click="handleAddQuota">添加指标</el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'更新监控指标':'添加监控指标'"
    >
      <el-form
        ref="quotaForm"
        :model="quotaForm"
        :rules="rules"
        class="add-quota-container"
      >
        <el-form-item label="设备号" prop="number">
          <el-input v-model="quotaForm.number" type="text" placeholder="请输入设备号" />
        </el-form-item>
        <el-form-item label="指标名" prop="name">
          <el-input v-model="quotaForm.name" type="text" placeholder="请输入指标名" />
        </el-form-item>
        <el-form-item label="指标单位" prop="unit">
          <el-input v-model="quotaForm.unit" type="text" placeholder="请输入指标单位" />
        </el-form-item>
        <el-form-item label="数据报键名" prop="valueKey">
          <el-input v-model="quotaForm.valueKey" type="text" placeholder="请输入数据报键名" />
        </el-form-item>
        <el-form-item label="键值类型" prop="valueType">
          <el-input v-model="quotaForm.valueType" type="text" placeholder="请输入键值类型" />
        </el-form-item>
        <el-form-item label="webhook" prop="webhook">
          <el-input v-model="quotaForm.webhook" type="text" placeholder="请输入webhook" />
        </el-form-item>
        <el-form-item label="安全值或范围" prop="reference">
          <el-input v-model="quotaForm.reference" type="text" placeholder="请输入安全值或范围" />
        </el-form-item>
        <div style="text-align:right;">
          <el-button v-loading="loading" type="danger" @click="dialogVisible=false">取消</el-button>
          <el-button v-loading="loading" type="primary" @click="confirm">确认</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addQuota, delQuota, getQuotaList, updateQuota } from '@/api/quota'

const defaultQuotaForm = {
  number: '',
  name: '',
  unit: '',
  valueKey: '',
  valueType: '',
  webhook: '',
  reference: ''
}
export default {
  name: 'DataQuota',
  data() {
    return {
      loading: false,
      quotaForm: Object.assign({}, defaultQuotaForm),
      dataQuotaList: [],
      dialogVisible: false,
      dialogType: 'new',
      listLoading: true,
      rules: {
        name: [{ required: true, message: '请输入指标名', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入指标单位', trigger: 'blur' }],
        subject: [{ required: true, message: '请输入指标名', trigger: 'blur' }],
        valueKey: [{ required: true, message: '请输入键名', trigger: 'blur' }],
        valueType: [{ required: true, message: '请输入键值类型(number/boolean)', trigger: 'blur' }],
        number: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
        webhook: [{ required: true, message: '请输入web钩子', trigger: 'blur' }],
        reference: [{ required: true, message: '请输入安全值范围', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getQuotaList()
  },
  methods: {
    async getQuotaList() {
      this.listLoading = true
      getQuotaList().then((response) => {
        this.dataQuotaList = response.data.quotaList
        console.log('quotaList', this.dataQuotaList)
        this.listLoading = false
      })
    },
    updateQuota() {
      this.$refs.quotaForm.validate(valid => {
        if (valid) {
          this.loading = true
          // eslint-disable-next-line no-undef
          updateQuota(this.quotaForm)
          this.loading = false
        } else {
          console.log('error update!!')
          return false
        }
      })
    },
    handleAddQuota() {
      this.dialogType = 'new'
      this.quotaForm = Object.assign({}, defaultQuotaForm)
      this.dialogVisible = true
    },
    handleUpdateQuota(scope) {
      this.dialogType = 'edit'
      this.quotaForm = Object.assign({}, scope.row)
      this.dialogVisible = true
    },
    handleDeleteQuota({ $index, row }) {
      this.$confirm('是否移除该指标?', 'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log('row', row)
        await delQuota(row)
        console.log('$index', $index)
        this.dataQuotaList.splice($index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    async confirm() {
      const isEdit = this.dialogType === 'edit'
      if (!isEdit) {
        await addQuota(this.quotaForm).then(response => {
          this.quotaForm = response.data.quota
          this.dataQuotaList.push(this.quotaForm)
        })
      } else {
        await this.updateQuota()
        for (let index = 0; index < this.dataQuotaList.length; index++) {
          if (this.dataQuotaList[index].number === this.quotaForm.number) {
            this.dataQuotaList[index].name = this.quotaForm.name
            this.dataQuotaList[index].description = this.quotaForm.desc
            break
          }
        }
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

.add-button-container {
  position: relative;
  width: 100%;
  min-width: 800px;
}

.add-button-item {
  width: 50px;
  margin: 10px auto;
}

</style>
